<template>
  <div class="img-item-wrapper" v-if="imgUrl"
    @mouseover="editState = !0"
    @mouseleave="editState = !1">
    <img :src="imgUrl" />
    <el-row class="text-edit" :gutter="10" v-show="editState">
      <el-col :span="12">
        <img-upload
          :size="size"
          :validateEvent="!1"
          @success="handleChange">
          <span class="btn-edit">修改</span>
        </img-upload>
      </el-col>
      <el-col :span="12">
        <span class="btn-edit" @click="handleDelete">删除</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import ImgUpload from 'modules/components/ImgUpload'
  export default{
    components: {
      ImgUpload
    },
    props: {
      imgUrl: String,
      index: Number,
      size: Number
    },
    data () {
      return {
        editState: !1
      }
    },
    methods: {
      handleChange (url) {
        this.$emit('changeData', this.index, {
          type: 'img',
          url: url
        })
      },
      handleDelete () {
        this.$emit('deleteData', this.index)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .img-item-wrapper{
    position: relative;
    img{
      max-width: 100%;
    }
    .text-edit{
      position: absolute;
      right: 2px;
      bottom: 2px;
      width: 92px;
      .btn-edit{
        display: block;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
        color: #333;
        cursor: pointer;
        background-color: #fff;
      }
    }
  }
</style>
